<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色授权</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<div class="container" id="app">
    <h2 class="form-signin-heading" style="color: black">角色授权</h2>

    <div class="row">
        <table class="table">

            <thead>
            <tr>
                <th>ID</th>
                <th>角色</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="u in roleList">
                <td>{{u.id}}</td>
                <td>{{u.name}}</td>
                <td>已授权</td>
                <td>
                    <button class="btn btn-danger" @click="authorize(roleId,u.id)">取消授权</button>
                </td>
            </tr>

            <tr v-for="u in resourceObj">
                <td>{{u.id}}</td>
                <td>{{u.name}}</td>
                <td>未授权</td>
                <td>
                    <button class="btn btn-success" @click="authorize(roleId,u.id)">授权</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            roleList:[],
            resourceObj: [],
            roleId: get_parameter("id")
        },
        created() {   //创建
            this.loadData()
            this.accredit()
        },
        methods: {
            //查询未授权
            accredit() {
                var vm = this;
                $.post("/resource/findByRoleIdNotHave", {id: vm.roleId}, function (response) {
                    // var obj = JSON.parse(response)
                    if (response.code == 200) {
                        vm.resourceObj = response.data;

                    }
                })
            },

            //查询授权
            loadData() {
                var vm = this;
                $.post("/role/findById", {id: vm.roleId}, function (response) {
                    if (response.code == 200) {
                        vm.roleList = response.data.resourceList;
                    }
                })
            },

            authorize(roleId,resourceId) {
                var vm = this;
                $.post("/role/authorize", {roleId: roleId,resourceId:resourceId}, function (response) {
                    if (response.code == 200) {
                        // vm.roleList = response.data.resourceList;
                        vm.loadData();
                        vm.accredit()
                    }
                })
            },
        }
    })

    //获取路径中的值
    function get_parameter(name) {
        var lot = location.search;
        var reg = new RegExp(".*" + name + "\\s*=([^=&#]*)(?=&|#|).*", "g");
        return decodeURIComponent(lot.replace(reg, "$1"));
    }
</script>

</body>
</html>